<template>
	<view class="box">
		<view class="top">
			<view @click="isdelete=!isdelete">{{isdelete?'取消管理':'管理'}}</view>
		</view>

		<view class="data" v-for="i in data">
			<view class="left">
				<label class="radio" @mousedown="xg(i._id,i.staus)">
					<radio :value="i.staus" :checked="i.staus" />
				</label>
				<image :src="i.img" mode=""></image>
			</view>
			<view class="right">
				<view class="rt">
					<view class="rtl">
						{{i.name}}
					</view>
					<view class="rlr">x{{i.num}}</view>
				</view>
				<view class="rt1">
					{{i.title}}
				</view>
				<view class="rt2">
					<text>全网低价</text>
					<text>15天价保</text>
					<text>先用后付</text>
				</view>
				<view class="rt3">
					秒杀券后￥{{i.price}} | ￥{{i.coupon}}
				</view>
			</view>
			<uni-icons v-show="isdelete" type="minus-filled" @click="del_shoplist(i._id)" color="red"
				size="30"></uni-icons>

		</view>
		<view class="bottom">
			<view class="bt">
				<view class="left">
					<view class="aaa">
						<label>
							<radio value="all" @mousedown="changeAll" :checked="flog" /><text class="all">全选</text>
						</label>
						<view>合计：<text>￥</text><text>{{count}}</text></view>
					</view>

					<button>结算</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, watch } from 'vue';
	let count = computed(() => {
		let a = 0
		data.value.forEach(item => {
			if (item.staus) {
				a += item.price * item.num
			}
		})
		return a
	})
	let data = ref([])
	let isdelete = ref(false)
	watch(count, (newValue, oldValue) => {
		console.log(`Count changed from ${oldValue} to ${newValue}`);
	});

 
	let flog = computed({
		get() {
		  if(data.value.filter(item=>item.staus).length==data.value.length){
			  return true
		  }
		  else{
			  return false
		  }
		},
		// setter
		set(newFullName) {
		  console.log(newFullName,'uohuhuo');
		},
	})
	let xg = (id, status) => {
		uni.request({
			url: 'http://127.0.0.1:3000/xaw/xgshopcar',
			method: "PUT",
			data: {
				id, status: !status
			},
			success(res) {
				getdata()

			}
		})
	}

	let getdata = () => {
		uni.request({
			url: 'http://127.0.0.1:3000/xaw/getshopcar',
			success(res) {
				data.value = res.data.data
			}
		})
	}
	let changeAll = () => {
		uni.request({
			url: "http://127.0.0.1:3000/xaw/all",
			method: "PUT",
			data: {
				status: flog.value
			},
			success(res) {
				getdata()
			}
		})

	}
	onMounted(() => {
		getdata()
	})
	let del_shoplist = (i) => {
		uni.request({
			url: "http://127.0.0.1:3000/xaw/dropShop",
			method: "DELETE",
			data: {
				_id: i
			},
			success(res) {
				console.log(res)
				getdata()
			}
		})
	}
</script>

<style scoped lang="scss">
	.box {
		width: 750rpx;
		height: calc(100vh - 90rpx);
		background-color: #F2F2F2;

		.top {
			height: 100rpx;
			width: 750rpx;
			font-size: 30rpx;
			float: right;
			font-weight: bolder;
			background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			justify-content: space-between;
			line-height: 60rpx;

			view {
				float: right;
			}

		}

		.data {
			background-color: #FFF;
			width: 750rpx;
			height: 230rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			padding: 20rpx;
			box-sizing: border-box;

			.right {
				display: flex;
				flex-direction: column;
				align-content: center;
				gap: 10rpx;
				width: 500rpx;
				height: 170rpx;

				.rt3 {
					font-size: 25rpx;
					color: #EA6A1B;
				}

				.rt2 {
					font-size: 25rpx;
					display: flex;
					gap: 30rpx;

					text:nth-child(1) {
						color: #EA6A1B;
					}

					text:nth-child(2) {
						color: #EA6A1B;
					}

					text:nth-child(3) {
						color: #88898D;
					}
				}

				.rt1 {
					font-size: 25rpx;

					color: #808792;
				}

				.rt {
					display: flex;
					font-size: 27rpx;
					justify-content: space-between;

					.rtl {
						width: 180px;
						/* 设置容器宽度 */
						white-space: nowrap;
						/* 不换行 */
						overflow: hidden;
						/* 超出部分隐藏 */
						text-overflow: ellipsis;
						/* 超出部分用省略号表示 */
					}

					.rlr {
						padding: 5rpx;
						box-sizing: border-box;
						width: 40rpx;
						height: 40rpx;
						display: flex;
						align-items: center;
						background-color: #FAFAFA;
						border-radius: 10rpx;
					}
				}
			}

			.left {
				display: flex;
				align-items: center;

				image {
					width: 170rpx;
					height: 170rpx;
					border-radius: 10rpx;
					margin-left: 20rpx;
					margin-right: 20rpx;
				}
			}
		}

		.bottom {
			border-top: 1px solid #ccc;
			width: 750rpx;
			height: 130rpx;
			position: fixed;
			bottom: 0;

			.bt {

				display: flex;

				.left {
					width: 750rpx;
					height: 130rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx;
					box-sizing: border-box;

					button {
						width: 250rpx;
						background-color: #EA6A1B;
						color: #fff;
					}

					.aaa {
						display: flex;
						align-items: center;
						width: 400rpx;
						justify-content: space-between;

						text:nth-child(1) {
							color: #EA6A1B;
						}

						text:nth-child(2) {
							font-size: 35rpx;
							color: #EA6A1B;
						}
					}

					.all {
						font-size: 30rpx;
						color: #ccc;
					}

					view:nth-child(2) {
						font-size: 25rpx;
					}
				}

				.right {
					width: 100rpx;
					height: 100rpx;
					background-color: greenyellow;
				}
			}

		}



	}
</style>